<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<textarea class="t1" rows="5" cols="45">
		</textarea><br /><br />

		<input class="s1" type="button" value="删除January(1)"><input class="s2" type="button" value="删除December(12)">
		<br /><br />
		<input type="text" class="p1" />
		<br /><br />
		<input class="s3" type="button" value="删除"><input class="s4" type="button" value="恢复"><br>

		<textarea class="t2" rows="2" cols="45">
		</textarea><br /><br />

		<input class="s5" type="button" value="还原">
		<input class="s6" type="button" value="删除前三项">
		<input class="s7" type="button" value="删除第二至第三项"><br>
		<input class="s8" type="button" value="在第二项后插入(orange,purple)">
		<input class="s9" type="button" value="替换第二至第三项">

		<script type="text/javascript">
			$(function() {
				Array.prototype.indexOf = function(val) { 
				for (var i = 0; i < this.length; i++) { 
				if (this[i] == val) return i; 
				} 
				return -1; 
				};
				Array.prototype.remove = function(val) { 
				var list = this.indexOf(val); 
				if (list > -1) { 
				this.splice(list, 1); 
				} 
				};
				// 案例1
				var list = ["January(1)", "February(2)", "March(3)", "April(4)", "May(5)", "June(6)", "July(7)", "Aguest(8)",
					"September(9)", "October(10)", "November(11)", "December(12)"
				];
				$(".t1").val(list);
				$(".s1").click(function() {
					list.remove("January(1)");
					$(".t1").val(list);
				})
				$(".s2").click(function() {
					list.remove("December(12)");
					$(".t1").val(list);
				})
				// 案例2
				var list1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
				var list2 = list1.concat();
				$(".p1").val(list1);
				$(".s3").click(function() {
					for (var i = 0; i < list1.length; i++) {
						list1.splice(i);
					}
					$(".p1").val(list1);
				})
				$(".s4").click(function() {
					$(".p1").val(list2);
				})
				// 案例3
				var list4 = ["red", "green", "blue", "white", "yellow", "black", "brown"];
				var list5 = list4.concat();
				$(".t2").val(list5);
				
				// 还原
				$(".s5").click(function() {
					list5 = list4.concat();
					$(".t2").val(list5);

					console.log(list4);
				})
				// 删除前三项
				$(".s6").click(function() {
					list5.splice(0, 3);
					$(".t2").val(list5);

				})
				// 删除第二至第三项
				$(".s7").click(function() {
					list5.splice(1, 2);
					$(".t2").val(list5);
				})
				// 在第二项后插入(orange,purple)
				$(".s8").click(function() {
					list5.splice(2, 0, "orange", "purple");
					$(".t2").val(list5);
				})
				// 替换第二至第三项位置
				$(".s9").click(function() {
					/* list5.splice(2,0,list5[1]);
					list5.splice(1,0,list5[3]);
					list5.splice(3,2); */	
					list5.splice(1,0,list5[2]);
					list5.splice(3,1);
					$(".t2").val(list5);
					console.log(list5);
				})



			})
		</script>
	</body>
</html>
